<!DOCTYPE html>
<html>
<head>
	<title>Contacts</title>
	<!-- -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<!-- -->
	<script src="../../../../enyo/enyo.js" type="text/javascript"></script>
	<!-- -->
	<script src="../../../layout/package.js" type="text/javascript"></script>
	<script src="../../../onyx/package.js" type="text/javascript"></script>
	<script src="../../../onyx/source/wip-package.js" type="text/javascript"></script>
	<!-- -->
	<script src="NameGenerator.js" type="text/javascript"></script>
	<!-- -->
	<style>
		body {
			color: white;
		}
		.list {
			background: url(images/bg.png);
		}
		/* item */
		.item {
			height: 100px;
			border-top: 1px solid silver;
			padding: 12px 16px;
			background-color: #333333;
		}

		/*
			FIXME: this class is not helpful when the
			swipeable item contains styled controls
		*/
		.onyx-swipeable-item-content {
			padding: 0;
		}

		.item-selected {
			background: #226B9A url(images/item-hilite.png) repeat-x bottom;
		}
		.item > * {
			display: inline-block;
			vertical-align: middle;
		}
		.avatar {
		    width: 32px;
		    height: 32px;
			padding-right: 10px;
		}
		.description {
			font-size: 12px;
			color: silver;
		}
		.remove-button {
			float: right;
			display: none;
		}
		/* divider */
		.divider {
			background-color: #666;
			font-size: 14px;
			font-weight: bold;
			padding: 8px 14px;
		}
		/* popup */
		.popup {
			width: 280px;
		}
		.popup > * {
			display: block;
			margin: 10px 10px;
		}
		.populate-button {
			float: right;
			margin-top: 25px;
		}
		.label {
			display: inline-block;
			width: 120px;
			padding-right: 10px;
		}
	</style>
</head>

<body>
	<script>
		enyo.kind({
			name: "App",
			kind: "FittableRows",
			components: [
				{kind: "onyx.MoreToolbar", style: "height: 58px;", components: [
					{kind: "onyx.Button", content: "setup", ontap: "showSetupPopup"},
					{kind: "onyx.Button", content: "remove selected", ontap: "removeSelected"},
					{kind: "onyx.InputDecorator", components: [
						{name: "newContactInput", kind: "onyx.Input", value: "Frankie Fu"},
					]},
					{kind: "onyx.Button", content: "new contact", ontap: "addItem"},
					{kind: "onyx.InputDecorator", components: [
						{kind: "onyx.Input", placeholder: "Search...", style: "width: 140px;", oninput: "searchInputChange"},
						{kind: "Image", src: "images/search-input-search.png", style: "width: 20px;"}
					]}
				]},
				{kind: "List", classes: "list", fit: true, multiSelect: true, onSetupItem: "setupItem", components: [
					{name: "divider", classes: "divider", ontap: "dividerTap"},
					{kind: "onyx.SwipeableItem", onDelete: "deleteRow", components: [
						{name: "item", kind: "ContactItem", classes: "item enyo-border-box"}
					]}
				]},
				{name: "popup", kind: "onyx.Popup", modal: true, centered: true, classes: "popup", components: [
					{components: [
						{content: "count:", classes: "label"},
						{kind: "onyx.InputDecorator", components: [
							{name: "countInput", kind: "onyx.Input", style: "width: 80px", value: 200}
						]}
					]},
					{components: [
						{content: "rowsPerPage:", classes: "label"},
						{kind: "onyx.InputDecorator", components: [
							{name: "rowsPerPageInput", kind: "onyx.Input", style: "width: 80px", value: 50}
						]}
					]},
					{components: [
						{content: "hide divider:", classes: "label"},
						{name: "hideDividerCheckbox", kind: "onyx.Checkbox"}
					]},
					{components: [
						{kind: "onyx.Button", content: "populate list", classes: "populate-button", ontap: "populateList"}
					]}
				]}
			],
			rendered: function() {
				this.inherited(arguments);
				this.populateList();
			},
			setupItem: function(inSender, inEvent) {
				var i = inEvent.index;
				var data = this.filter ? this.filtered : this.db;
				var item = data[i];
				// content
				this.$.item.setContact(item);
				// selection
				this.$.item.setSelected(inSender.isSelected(i));
				// divider
				if (!this.hideDivider) {
					var d = item.name[0];
					var prev = data[i-1];
					var showd = d != (prev && prev.name[0]);
					this.$.divider.setContent(d);
					this.$.divider.canGenerate = showd;
					this.$.item.applyStyle("border-top", showd ? "none" : null);
				}
			},
			refreshList: function() {
				if (this.filter) {
					this.filtered = this.generateFilteredData(this.filter);
					this.$.list.setCount(this.filtered.length);
				} else {
					this.$.list.setCount(this.db.length);
				}
				this.$.list.refresh();
			},
			addItem: function() {
				var item = this.generateItem(enyo.cap(this.$.newContactInput.getValue()));
				for (var i=0, di; di=this.db[i]; i++) {
					if (di.name > item.name) {
						this.db.splice(i, 0, item);
						break;
					}
				}
				this.refreshList();
			},
			removeItem: function(inIndex) {
				this._removeItem(inIndex);
				this.$.list.getSelection().remove(inIndex);
				this.refreshList();
			},
			_removeItem: function(inIndex) {
				var i = this.filter ? this.filtered[inIndex].dbIndex : inIndex;
				this.db.splice(i, 1);
			},
			deleteRow: function(inSender, inEvent) {
				this.removeItem(inEvent.index);
				return true;
			},
			removeSelected: function() {
				// Build list of items to remove, then go through in reverse order to
				// avoid removing anything that changes the index of remaining items.
				var removedKeys = enyo.keys(this.$.list.getSelection().getSelected());
				removedKeys.sort();
				for (var i = removedKeys.length - 1; i >= 0; --i) {
					this._removeItem(removedKeys[i]);
				}
				this.$.list.getSelection().clear();
				this.refreshList();
			},
			populateList: function() {
				this.$.popup.hide();
				this.createDb(this.$.countInput.getValue());
				this.$.list.setCount(this.db.length);
				this.$.list.setRowsPerPage(this.$.rowsPerPageInput.getValue());
				//
				this.hideDivider = this.$.hideDividerCheckbox.getValue();
				this.$.divider.canGenerate = !this.hideDivider;
				//
				this.$.list.reset();
			},
			createDb: function(inCount) {
				this.db = [];
				for (var i=0; i<inCount; i++) {
					this.db.push(this.generateItem(makeName(4, 6) + " " + makeName(5, 10)));
				}
				this.sortDb();
			},
			generateItem: function(inName) {
				return {
					name: inName,
					avatar: "images/avatars/" + avatars[enyo.irand(avatars.length)],
					title: titles[enyo.irand(titles.length)]
				}
			},
			sortDb: function() {
				this.db.sort(function(a, b) {
					if (a.name < b.name) return -1;
					else if (a.name > b.name) return 1;
					else return 0;
				});
			},
			showSetupPopup: function() {
				this.$.popup.show();
			},
			searchInputChange: function(inSender) {
				enyo.job(this.id + ":search", enyo.bind(this, "filterList", inSender.getValue()), 200);
			},
			filterList: function(inFilter) {
				if (inFilter != this.filter) {
					this.filter = inFilter;
					this.filtered = this.generateFilteredData(inFilter);
					this.$.list.setCount(this.filtered.length);
					this.$.list.reset();
				}
			},
			generateFilteredData: function(inFilter) {
				var re = new RegExp("^" + inFilter, "i");
				var r = [];
				for (var i=0, d; d=this.db[i]; i++) {
					if (d.name.match(re)) {
						d.dbIndex = i;
						r.push(d);
					}
				}
				return r;
			},
			dividerTap: function(inSender, inEvent) {
				// Prevent bubbling
				return true;
			}
		});

		var avatars = [
			"angel.png",
			"astrologer.png",
			"athlete.png",
			"baby.png",
			"clown.png",
			"devil.png",
			"doctor.png",
			"dude.png",
			"dude2.png",
			"dude3.png",
			"dude4.png",
			"dude5.png",
			"dude6.png"
		];
		var titles = [
			"Regional Data Producer",
			"Internal Markets Administrator",
			"Central Solutions Producer",
			"Dynamic Program Executive",
			"Direct Configuration Executive",
			"International Marketing Assistant",
			"District Research Consultant",
			"Lead Intranet Coordinator",
			"Central Accountability Director",
			"Product Web Assistant"
		];

		// It's convenient to create a kind for the item we'll render in the contacts list.
		enyo.kind({
			name: "ContactItem",
			events: {
				onRemove: ""
			},
			components: [
				// set noEvents to true to avoid creating lots of event handlers inside a flyweight
				{kind: "Image", name: "avatar", classes: "avatar", noEvents: true},
				{components: [
					{name: "name"},
					{name: "title", classes: "description"},
					{content: "(415) 711-1234", classes: "description"}
				]}
			],
			setContact: function(inContact) {
				this.$.name.setContent(inContact.name);
				this.$.avatar.setSrc(inContact.avatar);
				this.$.title.setContent(inContact.title);
			},
			setSelected: function(inSelected) {
				this.addRemoveClass("item-selected", inSelected);
			},
			removeTap: function(inSender, inEvent) {
				this.doRemove(inEvent);
				return true;
			}
		});

		new App({fit: true, classes: "enyo-unselectable"}).write();
	</script>
</body>
</html>